import React, { useEffect, useState } from "react";
import { queryUserAwardRecord } from "@/apis";
import { UserActivityAccountVO } from "@/types/UserActivityAccountVO";
import { showCustomAlertError } from "@/app/components/showMessage";

// @ts-ignore
export function AwardRecord({ allRefresh }) {
    const [refresh, setRefresh] = useState(0);
    const [userId, setUserId] = useState('');
    const [records, setRecords] = useState<UserActivityAccountVO[]>([]);

    const getParams = async () => {
        setUserId(String(new URLSearchParams(window.location.search).get('userId')));
    };

    const handleRefresh = () => {
        setRefresh(refresh + 1);
    };

    useEffect(() => {
        getParams();
        queryUserAwardRecordHandle();
    }, [refresh, allRefresh]);

    const queryUserAwardRecordHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const result = await queryUserAwardRecord(String(queryParams.get('userId')), Number(queryParams.get('activityId')));
        const { code, info, data }: { code: string; info: string; data: UserActivityAccountVO[] } = await result.json();

        if (code !== "0000") {
            showCustomAlertError("获取中奖记录失败", info);
            return;
        }
        setRecords(data);
    };

    const formatDate = (dateStr: string | number | Date) => {
        const date = new Date(dateStr);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    const itemHeight = 50; // 每条记录的高度
    const containerHeight = itemHeight * records.length; // 记录列表的总高度

    return (
        <div className="card-container">
            <div className="card-title">中奖记录</div>
            <div className="record-list">
                <div className="record-items" style={{ height: containerHeight }}>
                    {records.map((record, index) => (
                        <div key={index} className="card-content">
                            恭喜用户【<span className="user">{userId}</span>】
                            抽中奖品【<span className="prize">{record.awardTitle}</span>】
                            <span className="date">时间：{formatDate(record.awardTime)}</span>
                        </div>
                    ))}
                    {/* 复制记录以实现循环 */}
                    {/*{records.length > 3 && (*/}
                    {/*    records.map((record, index) => (*/}
                    {/*        <div key={index} className="card-content">*/}
                    {/*            恭喜用户【<span className="user">{userId}</span>】*/}
                    {/*            抽中奖品【<span className="prize">{record.awardTitle}</span>】*/}
                    {/*            <span className="date">时间：{formatDate(record.awardTime)}</span>*/}
                    {/*        </div>*/}
                    {/*    ))*/}
                    {/*)}*/}
                </div>
            </div>
        </div>
    );
}